﻿@{
    ViewBag.Title = "Project Page";
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
            <p>
                Create a web application in visual studio that displays a favorite color, while displaying a list of unselected colors.
            </p>
        </div>
    </section>
}
<h3>Specifications</h3>
<ol id="projectDetails" class="round">
    <li class="one">
        <h5>User Stories</h5>
        <ol>
            <li>As a user visiting the page for the first time, I can select my favorite color from a drop down of 7 colors.</li>
            <li>As a user who's selected a color, I can see my color choice declared in a “My favorite color is {color name}” heading at the top of the page.</li>
            <li>As a user who's selected a color, I can see an unordered list of the unselected colors below the drop down. </li>
        </ol>
    </li>

    <li class="two">
        <h5>Technical Requirements</h5>
        <ol>
            <li>Colors must be loaded from a separate document within the web application, i.e., you don't have the actual strings in your page's code-behind. </li>
            <li>Layout is up to you, however it should be consistent with modern web standards.</li>
        </ol>
    </li>

    <li class="three">
        <h5>Implementation Details</h5>
        <ol>
            <li>If a user is logged in, the color selected by the user will be preserved in the database so that the color settings will be maintained even after the session is closed.</li>
            <li>If a user is not logged in, the color selection will be held in the session state which will be cleared after the session is over.</li>
            <li>The xml file of colors is located in App_Data folder. On initial load of the xml file, it will be cached so that it can be used in successive requests.</li>
            <li>Knockout.js was used (seems to be automatically added when creating a web application project) for binding some UI elements to the data.</li>
            <li>Bootstrap was used to create the header, but the boiler plate Microsoft layout was used for the content areas</li>
            <li>Internalization has not been taken into account.</li>
            <li>One final thing, I apologize for my poor image editing skills :(</li>
            
        </ol>
    </li>
</ol>
